<template>
  <div>
    <img :src="qrCodeUrl" alt="QR Code" />
  </div>
</template>

<script>
import axios from 'axios';

export default {
  props: {
    content: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      qrCodeUrl: ''
    };
  },
  methods: {
    async generateQRCode() {
      try {
        const response = await axios.post('/generateQRCode', { content: this.content }, {
          responseType: 'arraybuffer'
        });
        const blob = new Blob([response.data], { type: 'image/png' });
        this.qrCodeUrl = URL.createObjectURL(blob);
      } catch (error) {
        console.error('Error generating QR Code:', error);
      }
    }
  },
  mounted() {
    this.generateQRCode();
  }
};
</script>